<template>
  <view v-if="registerIdAppUserInfos.length" class="more-connections-container">
    <view class="more-connections">
      <text class="title">人脉广场</text>
      <view class="user-list">
        <UserConnections
          v-for="(item, index) in registerIdAppUserInfos"
          :data="item"
          :key="index"
        ></UserConnections>
      </view>
      <view class="btn-box">
        <view class="blurry"></view>
        <TButton
          :customStyle="{
            borderRadius: '32rpx',
            height: '72rpx',
            lineHeight: '72rpx',
            background: '#EA5E0E',
          }"
          type="primary"
          text="查看更多人脉 >>>"
          @click="toConnectionSquare"
        ></TButton>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { getAppUserConnectionSquare } from '@/api/activity';
  import UserConnections from './UserConnections.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { onMounted, ref, type PropType } from 'vue';
  import type { IActivityRegisterQuery, RegisterIdAppUserInfo } from '@/api/activity/types';
  import { navigateTo } from '@/router';
  const props = defineProps({
    activityId: {
      type: Number,
      default: undefined,
    },
    scene: Number as PropType<IActivityRegisterQuery['scene']>,
  });

  onMounted(() => {
    queryAppUserConnectionSquare();
  });

  const registerIdAppUserInfos = ref<RegisterIdAppUserInfo[]>([]);
  const queryAppUserConnectionSquare = async () => {
    const res = await getAppUserConnectionSquare({
      current: 1,
      size: 3,
      activityId: props.activityId!,
      scene: props.scene || 0,
    });
    registerIdAppUserInfos.value = res.records;
  };

  const toConnectionSquare = () => {
    navigateTo({
      name: 'connectionSquare',
      options: {
        activityId: props.activityId!,
      },
    });
  };
</script>
<style lang="scss" scoped>
  .more-connections-container {
    padding: 32rpx;
    .more-connections {
      border-radius: 16rpx;
      background: #fff;
      /* 默认卡片投影 */
      box-shadow: 0px 4rpx 24rpx 0px rgba(150, 151, 153, 0.16);
      padding: 32rpx;
      .title {
        color: #333;
        font-size: 32rpx;
        font-weight: bold;
        line-height: 48rpx;
      }
      .user-list {
        margin-top: 20rpx;
        display: flex;
        flex-direction: column;
        gap: 32rpx;
      }
      .btn-box {
        position: relative;
        margin-top: 32rpx;
        .blurry {
          position: absolute;
          width: 100%;
          top: -120rpx;
          height: 120rpx;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
        }
      }
    }
  }
</style>
